@import "_common";
@import "header";
@import "_footer";

.body{
    .top{
        padding-bottom: .30rem;
        overflow: hidden;
        .container{
            padding-left: 0;
            .left{
                width: 3.45rem;
                float: left;
                margin-top: .40rem; 
                
                a{
                    display: block;
                    width: 3.43rem;
                    img{
                        width: 3.43rem;
                    }
                }
            }
            .right{
                width: 6.38rem;
                float: right;
                h2{
                    text-align: right;
                    font-size: .30rem;
                    display: block;
                    margin-top: .34rem;
                    margin-left: auto;
                    
                }
                p{
                    text-align: right;
                    text-indent: 2em;
                    font-size: .12rem;
                    line-height: 1.428;
                }
                img{
                    width: 3.03rem;
                    float: left;
                }
                img:nth-child(3),
                img:nth-child(5){
                    margin: 0;
                    margin-right: .3rem;
                }
                img:nth-child(3),
                img:nth-child(4){
                    
                    margin-bottom: .3rem;
                }
            }
        }
    }
    .hot{
        position: relative;
        
    }
    .hot::after{
        content: "";
        width: 0;
        height: 0;
        border-top: .13rem solid #e14738;
        border-right: .20rem solid #e14738;
        border-bottom: .13rem solid transparent;
        border-left: .20rem solid #e14738;
        position: absolute;
        top: .74rem;
        left: 0;
    }
    .hot::before{
        content: "热门";
        text-align: center;
        padding-top: .25rem;
        width: .40rem;
        height: .74rem;
        background:#e14738;
        letter-spacing: 0.01rem;
        font-size: .20rem;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
    }
    .two{
        .container{
            .left{
                float: right;
            }
            .right{
                float: left;
                h2{
                    text-align: left;
                }
                p{
                    text-align: left;
                    text-indent: 0;
                }
            }
        }
        
    }

    .more{
        padding-top: .90rem;
        padding-bottom: .50rem;
        .title{
            font-size: .36rem;
            margin-bottom: .38rem;
        }
        ul{
            overflow: hidden;
            text-align: center;
            li{
                
                display: inline-block;
                margin: 0 1.3% .43rem ;
                margin-bottom: .43rem;
                position: relative;
                a:nth-child(1){
                    display: block;
                    width: 3.03rem;
                    margin-bottom: .12rem;
                    font-size: 0;
                    img{
                        width: 3.03rem;
                    }
                }
                
                a:nth-child(2){
                    display: block;
                    font-size: .14rem;
                    text-align: center;
                    color: #000;
                }
                p{
                    width: 3.03rem;
                    height: 1.33rem;
                    background: rgba(0,0,0,0.5);
                    color: #fff;
                    font-size: .12rem;
                    position: absolute;
                    top: 0;
                    left: 0;
                    padding: .13rem;
                    box-sizing: border-box;
                    display: none;
                }
            }
            li:nth-child(3n-2){
                
                float: left;
                
            }
            
            li:nth-child(3n){
                float: right;
            }
            li:hover p{
                display: block;
            }
        }
    }
    
    
}

@media (min-width: 1024px){
    body div .container {
        width: 1000px !important;
    }
}
@media (max-width: 1050px){
    .body{
        .more{
            ul{
                li{
                    margin: 0 2.0% .43rem ;
                }
            }
        }
    }
}
@media (max-width: 768px){
    .body{
        .top{
        
            .container{
               
                .left{
                    width: 3.45rem;
                    float: none;
                    margin: .40rem auto 0;
                    
                    a{
                        display: block;
                        width: 3.43rem;
                        img{
                            width: 3.43rem;
                        }
                        
                    }
                }
                .right{
                    width: 9.38rem;
                    float: none;
                    margin: .40rem auto 0;
                    img:nth-child(3),
                    img:nth-child(5){
                        float: left;
                        width: 4.0rem;
                    }
                    img:nth-child(4),
                    img:nth-child(6){
                        float: right;
                        width: 4.0rem;
                    }
                }
            }
            .hot::after{
                top: 1.34rem;
            }
            .hot::before{
                height: 1.34rem;
            }
        }
    
        .two{
            .container{
                .left{
                    float: none;
                    margin: .40rem auto 0;
                }
                .right{
                    float: none;
                    margin: .40rem auto 0;
                    h2{
                        text-align: left;
                    }
                    p{
                        text-align: left;
                        text-indent: 0;
                    }
                }
            }
            
        }
    }
    
}
@media (max-width: 475px){
    .body{
        .more{
            ul{
                li{
                    float: none !important;
                    a:nth-child(1){
                        width: 5.03rem;
                        img{
                            width: 5.03rem;
                        }
                    }
                }
            }
        }
    }
}